<template>
  <!-- 设备管理 -->
  <div class="device">
    <div class="header">
      <el-select v-model="onlineStatus" clearable placeholder="请选择设备在线状态">
        <el-option label="离线" value="离线"></el-option>
        <el-option label="在线" value="在线"></el-option>
      </el-select>

      <el-select v-model="bdStatus" clearable placeholder="请选择设备绑定状态" style="margin:0 10px">
        <el-option v-for="item in bdStatusOpt" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input placeholder="请输入内容"  v-model="inputVal" clearable style="width:180px"></el-input>
      <el-button type="success" style="margin:0 10px">搜索</el-button>
      <el-button type="success" style="float:right" @click="drawer = true">录入</el-button>
    </div>
    <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column  prop="date" label="序号" width="90" align="center"></el-table-column>
        <el-table-column  prop="date" label="编号" min-width="100" align="center"></el-table-column>
        <el-table-column  prop="name" label="名称" min-width="100" align="center"></el-table-column>
        <el-table-column  prop="name" label="在线状态" min-width="100" align="center"></el-table-column>
        <el-table-column  prop="name" label="绑定状态" min-width="100" align="center"></el-table-column>
        <el-table-column  prop="name" label="操作" width="100" align="center"></el-table-column>
      </el-table>

      <!-- 抽屉 -->
      <el-drawer title="我是标题" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="padding:10px">
          <el-form-item label="编号" prop="num">
              <el-input v-model="ruleForm.num" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
              <el-input v-model="ruleForm.name" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
  </div>
</template>


<script>
import {get} from "../../utils/request"
export default ({
  data() {
    return{
      online_Status:'',
      bdStatus:'',
      bdStatusOpt:[{
        label:'未绑定',
        value:'未绑定',
        
      },{
        label:'已绑定',
        value:'已绑定',

      }],
      inputVal:'',
      tableData:[],
      drawer:false,
      ruleForm: {
          name: '',
          num: '',
        },
      rules: {
          num: [
            { required: true, message: '请选择填写编号', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
      } 
  }
  },
  created(){
      this.getDeviceList()
  },

  methods:{
    getDeviceList(){
      get('/device/pageQuery',{
        page:1,
        pageSize:10,
        name:'',
        bind_status:'',
        online_Status:''
      }).then(res=>{
        console.log(999,res);
      })
    },
    //抽屉关闭事件
      handleClose(done) {
        done();
        // this.$confirm('确认关闭？').then(_ => {
            
        //   })
        //   .catch(_ => {});
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

  },
})
</script>
<style lang ="scss" scoped>
  .device{
    padding: 5px;
    .header{
      margin-bottom: 10px;
    }
  }
</style>